<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6">
<![endif]--><!--[if IE 7 ]>
<html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8">
<![endif]--><!--[if IE 9 ]>
<html class="ie9"><![endif]-->
	<!--[if (gt IE 9)|!(IE)]><![endif]-->
<!--<![endif]--><!--STaTUS OK -->
<html>
	<head lang="zh-cmn-hans">
		<meta charset="utf-8" />
		<title>湖北楚悠行网络科技有限公司-用户中心-注册</title>	
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="/static/index/css/amazeui.min.css" />
		<link rel="stylesheet" href="/static/index/css/style.css" />
		<script type="text/javascript" src="/static/index/js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="/static/index/js/amazeui.min.js"></script>
		<script type="text/javascript" src="/static/admin/plugin/layer/layer.js"></script>
		<link rel="stylesheet" href="/static/index/css/login.css" />
		<link rel="stylesheet" href="/static/index/css/mui.min.css" />
		<script type="text/javascript" src="/static/index/js/mui.min.js" ></script>
		<script type="text/javascript" src="/static/index/js/login.js" ></script>

		<link rel="stylesheet" href="/static/index/css/regedit.css" />
		<link rel="stylesheet" href="/static/index/css/sui.css" />
		<script type="text/javascript" src="/static/index/js/sui.js"></script>
		
		<style>
			
			
			.radio-pretty.checked > span:before {
				color: #f88600;
			}
			
			input {
				height: 62px !important;
			}
			.radio-pretty span:before {
		    margin-right: 2px;
		    vertical-align: -4px;
		    font-size: 20px;
		    color: #bdbdbd;
		    margin-left: -2px;
		}
		</style>
	</head>

	<body>
		<div class="am-g in-public" style="margin-top: 25px; width: 1000px;">
			<div class="logo"></div>
		</div>
		<div class="am-g">
			<div  style="width: 999px;margin: 0 auto;font-size: 14px;" class="clearfix"> 
				<span style="float: right;color: #333333;">我已注册，马上<span><a href="<?=url('index/login/login')?>" style="color: #F88600;">登录</a></span></span>
			</div>
		</div>
		<div class="am-g content" style="margin-top: 12px;">
			<div data-am-widget="tabs" class="am-tabs am-tabs-d2">
				<ul class="am-tabs-nav am-cf" style="margin-top: 74px;">
					<li class="" style="max-width: 95px; margin-left: 100px;"></li>
					<li class="am-active"><a href="[data-tab-panel-0]"><span class="am-badge am-round am-badge-warning-active "style="vertical-align: middle;margin-top:-4px;">1</span>设置登录名</a></li>

					<li class="" style="    max-width: 95px;margin-right: 100px;"></li>
				</ul>
				<div class="am-tabs-bd" style="margin-top: 59px;margin-left: -20px;">
					<div data-tab-panel-0 class="am-tab-panel am-active">
						<form class="sui-form" id="register_form">

						<div class="am-g">
							<div class="am-u-sm-7 am-u-sm-offset-3 "> <span class="left1"></span> <input type="text" placeholder="请输入你的手机号" name="tel" class="am-form-field" style="margin: auto;display: block;float: left;padding-left: 55px;width: 528px" /> </div>
							<div class="am-u-sm-1 am-u-end" style="padding: 10px;"> <span class="right" style="display: none;"></span> </div>
						</div>

						<div class="am-g" style="margin-top: 37px;">
							<div class="am-u-sm-4 am-u-sm-offset-3" style="padding-right: 0rem;"> <span class="left2"></span><input type="text" name="code" placeholder="请输入短信验证码" class="am-form-field" style="margin: auto;display: block;float: left;padding-left: 55px;width: 360px;" /> </div>
							<div class="am-u-sm-3 am-u-end" style="padding-left: 0rem;"> <button type="button" class="am-btn am-btn-default" style="width: 190px;    float: left;height: 62px;" id="sendCode">获取短信验证码</button> </div>
						</div>

						<div class="am-g" style="margin-top: 37px;">
							<div class="am-u-sm-6 am-u-sm-offset-3 "> <span class="left3"></span> <input type="password" placeholder="请输入密码" class="am-form-field" name="password" style="margin: auto;display: block;float: left;padding-left: 59px;width: 100%" /> </div>
						</div>
						<div class="am-g" style="margin-top: 36px;">
							<div class="am-u-sm-6 am-u-sm-offset-3 "> <span class="left3"></span> <input type="password" placeholder="请再次输入密码" class="am-form-field" name="repassword" style="margin: auto;display: block;float: left;padding-left: 59px;width: 100%" /> </div>
						</div>

						<div class="am-g" style="margin-top: 21px;">
							<div class="am-u-sm-7 am-u-sm-offset-3" style="padding-right: 0rem;"> <label class="checkbox-pretty inline checked"> <input type="checkbox" checked="checked" name="checkbox2"><span style="font-size: 12px;color: #878787;">同意<a>《楚悠行商城会员章程》</a> <a>《支付宝协议》</a> 及 <a>《楚悠行商城广告联盟在线协议》</a></span> </label> </div>
						</div>
						<div class="am-g" style="margin-top:112px;">
							<div class="am-u-sm-7 am-u-sm-offset-3 ">
								<button type="button" id="register" class="am-btn am-btn-warning" style="width: 528px;padding: 20px;border: 1px rgba(187, 187, 187, 0.5) solid;"><font style="font-size: 20px;font-weight: bold;">同意协议并注册</font></button>
							</div>
						</div>
						</form>

					</div>
				</div>
			</div>
		</div>
		
		<div class="am-g " style="margin-top: 80px;text-align: center;font-size: 12px;">
			<div class="bottomLine" style="margin:0 auto;width:700px;height: 35px;">
				<span style="word-spacing:0.52rem;    text-align: center; width: 100%;"><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">商家入驻</a> | <a href="#">友情链接</a> | <a href="#">站点地图</a> | <a href="#">手机商城</a> | <a href="#">企业文化</a> | <a href="#">帮助中心</a> </span>
			</div>
		</div>
		<div class="am-g">
			<div class="bot ">
				<div style="margin:0 auto;width:600px;height: 30px;">
					<p style="font-size: 12px; text-align: center;">© &nbsp;2018-2019 楚悠行 版权所有 ，并保留所有权利 <span style="margin: 0 10px;">楚悠行 Tel ：4008-588-859</span><span>E-mai：maila@163.com</span> </p>
				</div>
			</div>
		</div>

		
	</body>

</html>

<script>
	$('#register').click(function(){
		if(!$("input[name='checkbox2']").is(":checked")){
			layer.msg('请同意注册协议');
			return false;
		}
		register();
	});

	function register(){

		var tel = $('input[name="tel"]').val();
		var code = $('input[name="code"]').val();
		var password = $('input[name="password"]').val();
		var repassword = $('input[name="repassword"]').val();

		if(!tel){
			layer.msg('手机号不能为空');
			return false;
		}
		if(!code){
			layer.msg('验证码不能为空');
			return false;
		}

		if(!password){
			layer.msg('密码不能为空');
			return false;
		}

		if(!repassword){
			layer.msg('确认密码不能为空');
			return false;
		}

		if(password !=repassword){
			layer.msg('两次密码输入不一致');
			return false;
		}

		var data = $('#register_form').serialize();
		console.log(data);
		$.ajax({
			url:"<?=url('index/login/register')?>",
			type:'post',
			data:data,
			dataType:'json',
			success:function(data){
				console.log(data);
				layer.msg(data.msg);
				if(data.code == 300){
					//layer.msg(data.msg);
				}else{
					window.location.href = "<?=url('index/login/login')?>";
				}
			},
			error:function(data){

			}
		});
	}
	var sendCode = {
		timer:null,
		count:100,
		is_check:true,
		startTime:function(obj){

			if(this.count==100){
				this.validate();

				//layer.msg(234);
				//var _this = this;
				//clearInterval(sendCode.timer);
				//this.ajaxGetData();
				//this.timer = setInterval(this.startInterval,1000);
			}

		},

		startInterval:function(){

			if(sendCode.count == 0){
				$('#sendCode').text('发送验证码');
				clearInterval(sendCode.timer);
				sendCode.count = 100;
			}else{
				sendCode.count--;
				$('#sendCode').text('重发' + sendCode.count + 's');
			}
		},

		validate:function(){
			var tel = $('input[name="tel"]').val();
			var _this = this;
			if(!tel){
				layer.msg('手机号不能为空');
				sendCode.is_check = false;
				return false;
			}
			if(!this.checkMobile(tel)){
				layer.msg('手机号格式不正确');
				sendCode.is_check = false;
				return false;
			}

			$.ajax({
				url: "<?=url('index/login/checkRegisterUser')?>",
				type:'get',
				data:{tel:tel,type:''},
				success:function(data){
					console.log(data);
					if(data.code == 300){
						layer.msg(data.msg);
						sendCode.is_check = false;
						return false;
					}else{
						clearInterval(sendCode.timer);
						_this.ajaxGetData();
						_this.timer = setInterval(_this.startInterval,1000);
					}
				},error:function(msg){
					console.log(msg);
				}
			});

		},

		ajaxGetData:function(){
			var tel = $('input[name="tel"]').val();

			$.ajax({
				url:"<?=url('index/login/sendCode')?>",
				type:'get',
				data:{tel:tel,type:'1'},
				success:function(data){

					console.log(data);
					if(data.code == 300){
						layer.msg(data.msg);

					}
				},error:function(msg){
					console.log(msg);
				}
			});
		},
		checkMobile:function (pone) {
			var myreg = /^1\d{10}$/;
			if (!myreg.test(pone)) {
				return false;
			} else {
				return true;
			}
		}
	}

	$('#sendCode').click(function(){
		sendCode.startTime(this);
	});

</script>